﻿@using RuoVea.OmiSystem.Attributes
@using RuoVea.OmiSystem.Options
@{
    Layout = "";
    AppConfig config = ConfigManages.Config ?? new AppConfig();
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@Html.Raw(RuoVea.OmiSystem.Language.i18n.user_management)</title>
    <link href="~/ruoveaui/xg6rvft8p/avue/index.css" rel="stylesheet" />
    <link href="~/ruoveaui/xg6rvft8p/elementui/index.min.css" rel="stylesheet" />
    <style>.el-button [class*="el-icon-"] + span { margin-left: 1px !important; } .el-scrollbar__wrap, .el-aside {overflow: hidden; } </style>
</head>
<body>
    <div id="app" v-cloak>
        <el-container>
            <el-aside width="200px">
                <avue-tree ref="tree" :option="orgOption" :data="orgData" @@node-click="nodeClick"></avue-tree>
            </el-aside>
            <el-main>
                <avue-crud :data="tableData" :option="option" :page.sync="pageOption" :table-loading="loading"
                           v-on:refresh-change="refreshChange"
                           v-on:row-save="handleRowSave"
                           v-on:row-update="handleRowUpdate"
                           v-on:row-del="handleRowDel"
                           v-on:search-change="searchChange"
                           v-on:search-reset="resetChange"
                           :cell-style="cellStyle"
                           v-on:on-load="onLoad">
                    <template slot="avatar" slot-scope="scope">
                        <el-avatar shape="circle" :src="scope.row.avatar">{{scope.row.account}} </el-avatar>
                    </template>
                    <template slot="record" slot-scope="scope">
                        <modify-record :data="scope.row"></modify-record>
                    </template>

                    <template slot-scope="{type,size,row,index}" slot="menu">
                        <el-button icon="el-icon-key" :size="size" :type="type" @@click="handleResetPwd(row,index)" v-if="option.resetPwdBtn">{{i18n.t('reset_password')}}</el-button>
                        <el-button icon="el-icon-s-grid" :size="size" :type="type" @@click="handleUserRole(row,index)" v-if="option.grantRoleBtn">{{i18n.t('authorize_role')}}</el-button>
                    </template>
                </avue-crud>
            </el-main>
        </el-container>

        <el-dialog :title="dialogtitle" ref="iframe" v-bind:visible.sync="subDialogVisible" dialogwidth="50%" dialogstyle="width:100%;height:360px;">
            <div style="text-align: center">
                <el-transfer style="text-align: left; display: inline-block" v-model="roleValue" :data="roleData" :button-texts="[`${this.i18n.t('remove')}`,`${this.i18n.t('allocate')}`]" filterable :titles="[`${this.i18n.t('not_granted_roles')}`, `${this.i18n.t('granted_roles')}`]" v-on:change="handleChange"></el-transfer>
            </div>
        </el-dialog>
    </div>

    <script src="~/ruoveaui/xg6rvft8p/vue/vue.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.i18n.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.lang.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/zhCN.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/en.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/fr.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/ja.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/vi.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/zhTW.js"></script>
    <script>Vue.prototype.$baseURL = "@config?.PrefixRoute";</script>
    <script src="~/ruoveaui/xg6rvft8p/vue/axios.min.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/vue/vue-i18n.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/avue/avue.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/avue/avue.min.option.js"></script>

    <script>
        new Vue({
            el: '#app',
            mixins: [curdMixin],
            data() {
                return {

                    name: "user",
                    pageUrl: "/user/pages",
                    addUrl: "/user/add",
                    editUrl: "/user/update",
                    deleteUrl: "/user/delete",

                    orgData: [],
                    orgOption: {
                        defaultExpandAll: true,
                        menu: false,
                        addBtn: false,
                        props: {
                            labelText: `${this.i18n.t('title')}`,
                            label: 'name',
                            value: 'id',
                            children: 'children'
                        }
                    },
                    option: {
                        searchShowBtn: Permissions.avePermission(`sysUser:page`),
                        refreshBtn: Permissions.avePermission(`sysUser:page`),

                        addBtn: Permissions.avePermission(`sysUser:addUser`),
                        editBtn: Permissions.avePermission(`sysUser:updateUser`),
                        delBtn: Permissions.avePermission(`sysUser:deleteUser`),
                        viewBtn: Permissions.avePermission(`sysUser:userById`),
                        resetPwdBtn: Permissions.avePermission(`sysUser:resetPwd`),
                        grantRoleBtn: Permissions.avePermission(`sysUser:grantRole`),
                        
                        menuWidth: '350',
                        rowKey: 'id',
                        searchShow: false,
                        column: [
                            { prop: "id", label: `${this.i18n.t('primary_key')}`, search: false, hide: true, type: "number", display: false, showColumn: false, },
                            { prop: "avatar", label: `${this.i18n.t('avatar')}`, slot: true, display: false, width: '70', editDisplay: false, addDisplay: false },
                            { prop: "account", label: `${this.i18n.t('account')}`, search: true, hide: false, type: "input", clearable: true, rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }], },
                            { prop: "password", label: `${this.i18n.t('password')}`, search: false, hide: false, viewDisplay: false, type: "password", editDisplay: false, hide: true, showColumn: false, rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}`, }], },
                            { prop: "nickName", label: `${this.i18n.t('nickname')}`, search: false, hide: false, type: "input", rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }], },
                            { prop: "realName", label: `${this.i18n.t('full_name')}`, search: true, hide: false, type: "input", rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }], },
                            { prop: "sex", label: `${this.i18n.t('gender')}`, search: false, hide: false, value: 3, type: "radio", button: true, dicData: [{ label: `${this.i18n.t('male')}`, value: 1, }, { label: `${this.i18n.t('female')}`, value: 2, }, { label: `${this.i18n.t('unknown')}`, value: 3, }], width: '80', },
                            { prop: "isDisable", label: `${this.i18n.t('status')}`, search: false, hide: false, value: 0, type: "radio", button: true, dicData: disableDicData, width: '80', },
                            { prop: "phone", label: `${this.i18n.t('mobile')}`, search: true, hide: false, type: "input" },
                            { prop: "email", label: `${this.i18n.t('email')}`, search: false, hide: false, type: "input" },
                            { prop: "tel", label: `${this.i18n.t('phone')}`, search: false, hide: false, type: "input" },
                            { prop: "lastLoginIp", label: `${this.i18n.t('last_login_ip')}`, value: null, search: false, hide: false, type: "input", display: false, showColumn: false, },

                            // { prop: "lastLoginTime", label: `${this.i18n.t('last_login_time')}`,value:null, search: false, hide: false, type: "input", display: false, },
                            {
                                label: `${this.i18n.t('organization')}`, prop: "orgId", hide: true, showColumn: false, defaultExpandAll: true,
                                type: "tree", props: { label: 'name', value: 'id', children: 'children' }, dicUrl: `${Vue.prototype.$baseURL}/organization/org`, showAllLevels: false, emitPath: false, checkStrictly: true,
                                rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }],
                            },
                            {
                                label: `${this.i18n.t('position')}`, prop: "posId", hide: true, showColumn: false,
                                type: "select", props: { label: 'name', value: 'id', children: 'children' }, dicUrl: `${Vue.prototype.$baseURL}/Position/pos`, showAllLevels: false, emitPath: false, checkStrictly: true,
                                rules: [{ required: true, trigger: "blur", message: `${this.i18n.t('pleaseenter')}` }],
                            },
                            { prop: "remark", label: `${this.i18n.t('note')}`, type: 'textarea', hide: true, showColumn: false, span: 24, rows: 2, },
                            { prop: "record", label: `${this.i18n.t('modification_record')}`, slot: true, display: false, showColumn: false, minWidth: 140, },
                        ],
                    },

                    dialogtitle: `${this.i18n.t('user_role')}`,
                    subDialogVisible: false,
                    selectRow: {},
                    roleData: [],
                    roleValue: [],
                }
            },
            created() {
                this.orgLoad();
                this.selectRow = {};
            },
            methods: {
                orgLoad() {
                    this.$http.get(`/organization/org`).then((res) => {
                        this.orgData = res;
                        this.loading = false;
                    }).catch(e => {
                        console.log(e);
                    });
                },
                nodeClick(data) {
                    var searchData = { ...this.searchParams, ...{ orgId: data.id } };
                    this.searchParams = searchData;
                    this.onLoad();
                },
                cellStyle({ row, column, rowIndex, columnIndex }) {
                    if (columnIndex == 6) {
                        if (row.isDisable == 0) {
                            return { color: '#409eff', }
                        }
                        else {
                            return { color: '#f56c6c', }
                        }
                    }
                },
                handleResetPwd(row) {
                    this.$confirm(`${this.i18n.t('confirm_reset_password')}`, this.i18n.t('tips'), { confirmButtonText: this.i18n.t('determine'), cancelButtonText: this.i18n.t('cancel'), type: 'error', customClass: "elmessagebox" })
                        .then(() => {
                            let data = { Id: row.id };
                            this.$http.post("/user/resetuserpwd", data).then((res) => {
                                if (res == true) {
                                    this.$message({ message: `${this.i18n.t('submit_success')}`, center: true, type: 'success' });
                                }
                            });
                        }).catch(_ => { console.info(_); })
                },
                handleUserRole(row) {
                    this.selectRow = row;
                    this.dialogtitle = `[${row.realName}]${this.i18n.t('authorize_role')}`;
                    this.roleData = [];
                    this.roleValue = [];
                    this.LoadRoleData();
                    this.LoadUserRoleData();
                    this.subDialogVisible = true;
                },
                LoadRoleData() {
                    this.$http.get("/role/getrolelist", { async: false }).then((res) => {
                        res.forEach(item => { this.roleData.push({ label: item.name, key: item.id }); });
                    }).catch(e => { console.log(e); });
                },
                LoadUserRoleData() {
                    this.$http.get("/role/userrolelist/" + this.selectRow.id, { async: false }).then((res) => {
                        res.forEach(item => {
                            this.roleValue.push(item.id);
                        });
                    }).catch(e => {
                        console.log(e);
                    });
                },
                handleChange(value, direction, movedKeys) {
                    let data = { UserId: this.selectRow.id, RoleIdList: movedKeys };
                    if (direction == 'right') {
                        this.$http.post("/user/grantuserroles", data).then((res) => {
                            if (res == true) {
                                this.$message({ message: `${this.i18n.t('submit_success')}`, center: true, type: 'success' });
                            }
                        });
                    }
                    else {
                        this.$http.post("/user/removeuserroles", data).then((res) => {
                            if (res == true) {
                                this.$message({ message: `${this.i18n.t('submit_success')}`, center: true, type: 'success' });
                            }
                        });
                    }
                }
            }
        });
    </script>
</body>
</html>